<template>
  <div v-loading="loadding" flex class="">
    <div style="margin-right: 20px;
    padding-right: 20px;
    width:300px;
    border-right: 1px solid #ccc;">
      <div class="margin_bottom_10">
        标题名称：
      </div>
      <el-input v-model="formData.title" class="margin_bottom_10" placeholder="输入记录名称" />
      <div class="margin_bottom_10" flex="main:justify cross:center">
        照片描述：
        <!-- <el-link type="primary">保存</el-link> -->
      </div>
      <el-input v-model="formData.remark" class="margin_bottom_20" type="textarea" placeholder="输入照片描述" :autosize="{ minRows: 6}" />
      <div class="margin_bottom_10">照片录音：{{ formData.videoFileList.length }}个</div>
      <!-- <el-input v-model="remark" type="textarea" /> -->

      <el-upload
        :action="uploadUrl"
        :headers="headers"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :file-list="formData.videoFileList"
        :on-error="handleError"
        accept=".amr,.mp3"
        :on-success="handleOnVideoSuccess">
        <el-button size="mini" type="primary">上传音频</el-button>
        <div slot="tip" class="el-upload__tip">只能上传MP3，AAC，Ogg，Opus等音频文件</div>
      </el-upload>

      <el-divider />
      <div v-for="(item,index) in formData.videoFileList" :key="index" class="margin_bottom_20">
        <div flex="main:justify cross:center">
          <span>{{ item.name }}</span>
          <i class="el-icon-close hover" @click="handleRemoveVideo(index)" />
        </div>
        <video width="280" height="70" controls="" name="media"><source :src="item.url" type="audio/flac"></video>
        <!-- <iframe width="280" height="50" frameborder="0" scrolling="no" src="http://localhost:8065/profile/upload/周杰伦 - 七里香.flac" /> -->
        <!-- <span>demo录音文件.mp3</span>

          <i class="el-icon-video-play" style="font-size:40px" /> -->
        <el-divider />
      </div>
      <el-empty v-if="!formData.videoFileList.length" description="暂无音频" />

    </div>
    <div class="flex_1 img_box">
      <div flex="main:justify" class="margin_bottom_20  ">
        <div>上传人：<span>{{ formData.userName || '--' }}</span></div>
        <div>上传日期：<span>{{ formData.createTime || '--' }}</span></div>
      </div>
      <div flex="main:center cross:center">
        <el-upload
          :action="uploadUrl"
          :headers="headers"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          multiple
          accept=".bmp, .gif, .jpg, .jpeg, .png"
          :before-upload="()=>loadding=true"
          :file-list="formData.imgFileList"
          :on-remove="handleOnRemove"
          :on-success="handleOnImgSuccess">
          <i class="el-icon-plus" />
          <!-- <el-button size="mini" type="primary">上传音频</el-button>
          <div slot="tip" class="el-upload__tip">只能上传MP3，AAC，Ogg，Opus等音频文件</div> -->
        </el-upload>
      </div>

    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pdfOptions: {
      type: Object,
      default: () => ({})
    },
    url: {
      type: String
    }
  },
  data() {
    const _token = this.$route.query.token
    return {
      visible: false,
      formData: {
        remark: '我是照片描述',
        videoFileList: [],
        imgFileList: [],
        userName: this.$store.state.user.name,
        createTime: '',
        title: this.$store.state.user.name + new Date().getTime()
      },

      // remark: '我是照片描述',
      loadding: false,

      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + (getToken() || _token)
      },
      imageUrl: ''
    }
  },
  computed: {
    api() {
      return process.env.VUE_APP_BASE_API
    },
    host() {
      return location.origin
    },
    fileUrl() {
      return this.url || this.pdfOptions.url + '?date=' + new Date().getTime()
    },
    fileType() {
      return this.fileUrl.slice(-3)
    },
    fileName() {
      return this.fileUrl.slice(this.fileUrl.lastIndexOf('/') + 1)
    }
  },
  watch: {
    show: {
      handler(val) {
        this.visible = val
      },
      immediate: true
    }
  },
  created() {
    // setInterval(() => {
    //   this.formData.createTime = this.parseTime(new Date(), '{y}-{m}-{d}-{h}:{i}:{s}')
    //   this.formData.title = `${this.formData.userName}-${this.formData.createTime}`
    // })
  },
  methods: {
    handleOnRemove(file, fileList) {
      this.formData.imgFileList = fileList
    },
    initForm() {
      this.formData = {
        remark: '我是照片描述',
        videoFileList: [],
        imgFileList: [],
        userName: this.$store.state.user.name,
        createTime: '',
        title: this.$store.state.user.name + new Date().getTime()
      }
    },
    handleBeforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'amr'
      const extension2 = testmsg === 'mp3'
      if (!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        })
      }
      this.loadding = true
      return extension || extension2
    },
    handlePictureCardPreview(file) {
      const index = this.formData.imgFileList.findIndex(item => item.url == file.url)
      this.$ImagePreview(this.formData.imgFileList, index, {
        closeOnClickModal: true
      })
    },
    handleOnVideoSuccess(res) {
      this.formData.videoFileList.push(res.data)
      this.loadding = false
    },
    handleOnImgSuccess(res) {
      this.formData.imgFileList.push(res.data)
      this.loadding = false
    },
    handleError(res) {
      this.$message.error(res)
      this.loadding = false
    },
    handleRemoveVideo(index) {
      this.formData.videoFileList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// .iframe_box{
//   width: 100%;
//   min-height: calc(100vh - 146px);
// }
// .img_box{
//   width: calc(100vw - 342px);
//   height: calc(100vh - 170px);
//   overflow: auto;
// }

</style>
